<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .item {
        width: 500px;
        background-color: skyblue;
        /* 方式一: 改变元素的特性和垂直方向的布局 */
        display: inline-block;
        vertical-align: top;
        /* 方式二: 通过浮动完成 */
        /* float: left; */
      }
      .album {
        width: 500px;
      }
      .keyword {
        font-size: 30px;
        color: white;
        background-color: orange;
      }
    </style>
  </head>

  <body>
    <h1>星球介绍</h1>

    <!-- 木星的 -->
    <div class="item">
      <h2>木星</h2>
      <!-- alt -> alternative -->
      <img class="album" src="../images/muxing.jpg" alt="木星" />
      <p>
        <span class="keyword">木星(Jupiter)</span
        >是太阳系八大行星中体积最大、自转最快的行星，从内向外的第五颗行星。它的质量为太阳的千分之一，是太阳系中其它七大行星质量总和的2.5倍。由于木星与土星、天王星、海王星皆属气体行星，因此四者又合称类木行星（木星和土星合称气态巨行星）。木星是一个气态巨行星，占所有太阳系行星质量的70%，主要由氢组成，占其总质量的75%，其次为氦，占总质量的25%，岩核则含有其他较重的元素。人类所看到的通常是大气中云层的顶端，压强比1个大气压略高。
      </p>
    </div>

    <!-- 地球的 -->
    <div class="item">
      <h2>地球</h2>
      <img class="album" src="../images/diqiu.jpg" alt="" />
      <p>
        <span class="keyword">地球(Earth)</span
        >是太阳系八大行星之一，按离太阳由近及远的次序排为第三颗，也是太阳系中直径、质量和密度最大的类地行星，距离太阳1.5亿公里。地球自西向东自转，同时围绕太阳公转。现有40~46亿岁，
        [1] 它有一个天然卫星——月球，二者组成一个天体系统——地月系统。46亿年以前起源于原始太阳星云。
      </p>
    </div>
  </body>
</html>